<template>
  <div class="integral-task-page">
    <!-- 页面标题 -->
    <div class="page-title">
      <i class="fas fa-tasks"></i> 积分任务列表
    </div>
    
    <!-- 搜索区域 -->
    <div class="search-form">
      <div class="form-row">
        <div class="form-item">
          <label class="form-label">积分标题</label>
          <input 
            type="text" 
            class="form-input"
            v-model.trim="searchForm.keyword" 
            placeholder="输入关键词搜索"
            @keyup.enter="handleSearch"
          >
        </div>
        <div class="form-item">
          <label class="form-label">状态</label>
          <select class="form-select" v-model="searchForm.status">
            <option value="">全部</option>
            <option value="active">启用</option>
            <option value="inactive">停用</option>
          </select>
        </div>
        <div class="form-item">
          <label class="form-label">创建时间</label>
          <div class="date-range">
            <input 
              type="date" 
              class="form-input"
              v-model="searchForm.startDate"
            >
            <span class="date-separator">至</span>
            <input 
              type="date" 
              class="form-input"
              v-model="searchForm.endDate"
            >
          </div>
        </div>
        <div class="form-btn">
          <button class="btn btn-primary" @click="handleSearch">
            <i class="fas fa-search"></i> 搜索
          </button>
          <button class="btn btn-secondary" @click="handleReset">
            <i class="fas fa-redo"></i> 重置
          </button>
        </div>
      </div>
    </div>
    
    <!-- 表格区域 -->
    <div class="table-container">
      <div class="table-header">
        <div class="table-title">积分任务</div>
        <div class="table-actions">
          <button class="btn btn-success" @click="handleAddTask">
            <i class="fas fa-plus"></i> 新增任务
          </button>
        </div>
      </div>
      
      <div class="table-wrapper" :class="{ loading: loading }">
        <table class="data-table">
          <thead>
            <tr>
              <th>积分标题</th>
              <th>积分描述</th>
              <th>积分/次</th>
              <th>积分获取限制</th>
              <th>图标</th>
              <th>创建时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="task in paginatedData" :key="task.id">
              <td>{{ task.title }}</td>
              <td>{{ task.description }}</td>
              <td>{{ task.points }}</td>
              <td>{{ task.limitText }}</td>
              <td>
                <i v-if="task.icon" :class="task.icon" class="task-icon"></i>
                <span v-else>无图标</span>
              </td>
              <td>{{ task.createTime }}</td>
              <td>
                <label class="switch">
                  <input type="checkbox" :checked="task.status === 1" @change="toggleTaskStatus(task)">
                  <span class="slider"></span>
                </label>
              </td>
              <td>
                <div class="action-buttons">
                  <button class="btn btn-text" @click="handleEdit(task)">
                    <i class="fas fa-edit"></i> 编辑
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        
        <div v-if="loading" class="loading-overlay">
          <div class="loading-spinner"></div>
          <div>加载中...</div>
        </div>
        
        <div v-if="paginatedData.length === 0 && !loading" class="empty-state">
          <i class="fas fa-inbox"></i>
          <div>暂无数据</div>
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <div class="pagination-info">
          共 {{ pagination.total }} 条记录，显示 {{ paginationStart }} - {{ paginationEnd }} 条
        </div>
        <div class="pagination-controls">
          <select class="page-size-select" v-model="pagination.pageSize" @change="handleSizeChange">
            <option value="10">10条/页</option>
            <option value="20">20条/页</option>
            <option value="50">50条/页</option>
          </select>
          
          <button 
            class="pagination-btn" 
            :disabled="pagination.currentPage === 1"
            @click="handlePageChange(pagination.currentPage - 1)"
          >
            上一页
          </button>
          
          <button 
            class="pagination-btn" 
            :disabled="pagination.currentPage === totalPages"
            @click="handlePageChange(pagination.currentPage + 1)"
          >
            下一页
          </button>
        </div>
      </div>
    </div>
    
    <!-- 编辑弹窗 -->
    <div v-if="editDialogVisible" class="modal-overlay" @click.self="handleCloseEditDialog">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3 class="modal-title">积分编辑-积分设置</h3>
          <button class="modal-close" @click="handleCloseEditDialog">×</button>
        </div>
        <div class="modal-body">
          <form class="edit-form">
            <div class="form-group">
              <label class="form-label">积分标题 <span class="required">*</span></label>
              <input 
                type="text" 
                class="form-input"
                v-model.trim="editForm.title" 
                placeholder="请输入内容"
                maxlength="8"
              >
              <div class="textarea-counter">
                文字内容不超过8个字
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">积分描述 <span class="required">*</span></label>
              <textarea 
                class="form-textarea" 
                v-model.trim="editForm.description" 
                placeholder="请输入内容"
                maxlength="12"
                rows="3"
              ></textarea>
              <div class="textarea-counter">
                文字内容不超过12个字
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">积分/次 <span class="required">*</span></label>
              <input 
                type="number" 
                class="form-input"
                v-model.number="editForm.points" 
                placeholder="请输入整数"
                min="1"
              >
            </div>
            <div class="form-group">
              <label class="form-label">积分获取限制 <span class="required">*</span></label>
              <div class="radio-group">
                <label class="radio-label">
                  <input 
                    type="radio" 
                    value="unlimited" 
                    v-model="editForm.limitType"
                  >
                  <span class="radio-custom"></span>
                  无限制
                </label>
                <label class="radio-label">
                  <input 
                    type="radio" 
                    value="max" 
                    v-model="editForm.limitType"
                  >
                  <span class="radio-custom"></span>
                  最大值
                </label>
                <label class="radio-label">
                  <input 
                    type="radio" 
                    value="fixed" 
                    v-model="editForm.limitType"
                  >
                  <span class="radio-custom"></span>
                  固定值
                </label>
              </div>
              
              <div v-if="editForm.limitType !== 'unlimited'" class="limit-inputs">
                <input 
                  type="number" 
                  class="form-input"
                  v-model.number="editForm.limitValue" 
                  placeholder="限制值"
                  min="1"
                >
                <select class="form-select" v-model="editForm.limitUnit">
                  <option value="day">天</option>
                  <option value="week">周</option>
                  <option value="month">月</option>
                </select>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">图标</label>
              <div class="file-upload">
                <input 
                  type="file" 
                  class="form-input"
                  accept=".jpg,.png,.svg"
                  @change="handleFileUpload"
                >
                <div class="file-hint">
                  可上传jpg/png/svg文件，且不超过500kb
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" @click="handleCloseEditDialog">取消</button>
          <button class="btn btn-primary" @click="submitEdit" :disabled="editLoading">
            <i class="fas fa-save"></i> {{ editLoading ? '保存中...' : '保存' }}
          </button>
        </div>
      </div>
    </div>
    
    <!-- 消息提示 -->
    <div v-if="message.visible" class="message" :class="message.type">
      {{ message.text }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'IntegralTaskList',
  props: {
    // 可以添加props用于接收外部数据或配置
  },
  data() {
    return {
      searchForm: {
        keyword: '',
        status: '',
        startDate: '',
        endDate: ''
      },
      tableData: [],
      loading: false,
      editDialogVisible: false,
      editLoading: false,
      editForm: {
        id: '',
        title: '',
        description: '',
        points: 1,
        limitType: 'unlimited',
        limitValue: 1,
        limitUnit: 'day',
        icon: '',
        status: 1
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      message: {
        visible: false,
        text: '',
        type: 'success'
      }
    }
  },
  computed: {
    filteredData() {
      let data = [...this.tableData]
      
      // 根据关键词筛选
      if (this.searchForm.keyword) {
        const keyword = this.searchForm.keyword.toLowerCase()
        data = data.filter(task => 
          task.title.toLowerCase().includes(keyword) || 
          task.description.toLowerCase().includes(keyword)
        )
      }
      
      // 根据状态筛选
      if (this.searchForm.status) {
        if (this.searchForm.status === 'active') {
          data = data.filter(task => task.status === 1)
        } else if (this.searchForm.status === 'inactive') {
          data = data.filter(task => task.status === 0)
        }
      }
      
      // 根据日期筛选
      if (this.searchForm.startDate && this.searchForm.endDate) {
        const start = new Date(this.searchForm.startDate)
        const end = new Date(this.searchForm.endDate)
        end.setDate(end.getDate() + 1) // 包含结束日期
        
        data = data.filter(task => {
          const createDate = new Date(task.createTime)
          return createDate >= start && createDate < end
        })
      }
      
      this.pagination.total = data.length
      return data
    },
    paginatedData() {
      const startIndex = (this.pagination.currentPage - 1) * this.pagination.pageSize
      const endIndex = startIndex + this.pagination.pageSize
      return this.filteredData.slice(startIndex, endIndex)
    },
    totalPages() {
      return Math.ceil(this.pagination.total / this.pagination.pageSize)
    },
    paginationStart() {
      return (this.pagination.currentPage - 1) * this.pagination.pageSize + 1
    },
    paginationEnd() {
      const end = this.pagination.currentPage * this.pagination.pageSize
      return end > this.pagination.total ? this.pagination.total : end
    }
  },
  methods: {
    handleSearch() {
      this.pagination.currentPage = 1
    },
    handleReset() {
      this.searchForm.keyword = ''
      this.searchForm.status = ''
      this.searchForm.startDate = ''
      this.searchForm.endDate = ''
      this.pagination.currentPage = 1
    },
    handlePageChange(page) {
      if (page < 1 || page > this.totalPages || page === this.pagination.currentPage) return
      this.pagination.currentPage = page
    },
    handleSizeChange() {
      this.pagination.currentPage = 1
    },
    handleAddTask() {
      Object.assign(this.editForm, {
        id: '',
        title: '',
        description: '',
        points: 1,
        limitType: 'unlimited',
        limitValue: 1,
        limitUnit: 'day',
        icon: '',
        status: 1
      })
      this.editDialogVisible = true
    },
    handleEdit(task) {
      Object.assign(this.editForm, {
        id: task.id,
        title: task.title,
        description: task.description,
        points: task.points,
        limitType: task.limitType,
        limitValue: task.limitValue,
        limitUnit: task.limitUnit,
        icon: task.icon,
        status: task.status
      })
      this.editDialogVisible = true
    },
    handleCloseEditDialog() {
      this.editDialogVisible = false
    },
    toggleTaskStatus(task) {
      task.status = task.status === 1 ? 0 : 1
      this.showMessage(task.status === 1 ? '已启用' : '已停用', 'success')
    },
    async submitEdit() {
      if (!this.editForm.title || !this.editForm.description || !this.editForm.points) {
        this.showMessage('请填写完整信息', 'error')
        return
      }
      
      try {
        this.editLoading = true
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        if (this.editForm.id) {
          // 更新现有任务
          const index = this.tableData.findIndex(task => task.id === this.editForm.id)
          if (index !== -1) {
            this.tableData[index] = {
              ...this.tableData[index],
              title: this.editForm.title,
              description: this.editForm.description,
              points: this.editForm.points,
              limitType: this.editForm.limitType,
              limitValue: this.editForm.limitValue,
              limitUnit: this.editForm.limitUnit,
              icon: this.editForm.icon,
              limitText: this.getLimitText(this.editForm.limitType, this.editForm.limitValue, this.editForm.limitUnit)
            }
          }
        } else {
          // 添加新任务
          const newTask = {
            id: 'T' + Date.now(),
            title: this.editForm.title,
            description: this.editForm.description,
            points: this.editForm.points,
            limitType: this.editForm.limitType,
            limitValue: this.editForm.limitValue,
            limitUnit: this.editForm.limitUnit,
            icon: this.editForm.icon,
            createTime: new Date().toISOString().split('T')[0],
            status: this.editForm.status,
            limitText: this.getLimitText(this.editForm.limitType, this.editForm.limitValue, this.editForm.limitUnit)
          }
          this.tableData.unshift(newTask)
        }
        
        this.showMessage(this.editForm.id ? '更新成功' : '添加成功', 'success')
        this.editDialogVisible = false
      } catch (error) {
        this.showMessage('操作失败', 'error')
      } finally {
        this.editLoading = false
      }
    },
    handleFileUpload(event) {
      const file = event.target.files[0]
      if (file) {
        if (file.size > 500 * 1024) {
          this.showMessage('文件大小不能超过500KB', 'error')
          return
        }
        
        if (!['image/jpeg', 'image/png', 'image/svg+xml'].includes(file.type)) {
          this.showMessage('只能上传jpg/png/svg文件', 'error')
          return
        }
        
        // 模拟文件上传成功
        this.editForm.icon = 'fas fa-check-circle'
        this.showMessage('图标上传成功', 'success')
      }
    },
    getLimitText(limitType, limitValue, limitUnit) {
      if (limitType === 'unlimited') return '无限制'
      
      const unitText = {
        'day': '天',
        'week': '周',
        'month': '月'
      }
      
      return `${limitValue}/${unitText[limitUnit]}`
    },
    showMessage(text, type = 'success') {
      this.message.text = text
      this.message.type = type
      this.message.visible = true
      
      setTimeout(() => {
        this.message.visible = false
      }, 3000)
    },
    async fetchData() {
      this.loading = true
      try {
        // 模拟API调用
        await new Promise(resolve => setTimeout(resolve, 800))
        
        // 模拟数据
        this.tableData = [
          {
            id: 'T1001',
            title: '测试',
            description: '是',
            points: 4,
            limitType: 'fixed',
            limitValue: 1,
            limitUnit: 'day',
            icon: '',
            createTime: '2025-09-29',
            status: 1,
            limitText: '1/天'
          },
          {
            id: 'T1002',
            title: '浏览岗位5秒以上',
            description: '看看有没有适合你的岗位',
            points: 5,
            limitType: 'unlimited',
            limitValue: 0,
            limitUnit: 'day',
            icon: '',
            createTime: '2025-01-08',
            status: 1,
            limitText: '无限制'
          },
          {
            id: 'T1003',
            title: '完善个人简历',
            description: '详细的求职信息必不可少',
            points: 100,
            limitType: 'unlimited',
            limitValue: 0,
            limitUnit: 'day',
            icon: '',
            createTime: '2025-01-08',
            status: 1,
            limitText: '无限制'
          },
          {
            id: 'T1004',
            title: '完成实名认证',
            description: '上传身份信息确认那就是你',
            points: 20,
            limitType: 'unlimited',
            limitValue: 0,
            limitUnit: 'day',
            icon: '',
            createTime: '2025-01-08',
            status: 1,
            limitText: '无限制'
          },
          {
            id: 'T1005',
            title: '投递一个职位',
            description: '主动投递更容易找到工作哦',
            points: 10,
            limitType: 'max',
            limitValue: 80,
            limitUnit: 'day',
            icon: '',
            createTime: '2025-01-08',
            status: 1,
            limitText: '80/天'
          },
          {
            id: 'T1006',
            title: '接受面试邀请',
            description: '接受面试邀请获得积分',
            points: 10,
            limitType: 'max',
            limitValue: 100,
            limitUnit: 'month',
            icon: '',
            createTime: '2025-01-08',
            status: 1,
            limitText: '100/月'
          },
          {
            id: 'T1007',
            title: '种草分享你看到的好工作',
            description: '分享好工作给朋友',
            points: 5,
            limitType: 'unlimited',
            limitValue: 0,
            limitUnit: 'day',
            icon: '',
            createTime: '2025-01-08',
            status: 1,
            limitText: '无限制'
          },
          {
            id: 'T1008',
            title: '绑定微信',
            description: '绑定微信不错过消息哦',
            points: 20,
            limitType: 'fixed',
            limitValue: 1,
            limitUnit: 'day',
            icon: '',
            createTime: '2025-01-08',
            status: 1,
            limitText: '1/天'
          }
        ]
        
        this.pagination.total = this.tableData.length
      } catch (error) {
        this.showMessage('获取数据失败', 'error')
      } finally {
        this.loading = false
      }
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.integral-task-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title i {
  color: #409eff;
}

.search-form {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.form-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}

.form-label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.form-input, .form-select {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: #409eff;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-separator {
  color: #909399;
}

.form-btn {
  padding: 8px 12px;
  margin-top: 22px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-primary {
  background: #409eff;
  color: #fff;
  margin-right: 12px;
}

.btn-primary:hover:not(:disabled) {
  background: #66b1ff;
}

.btn-secondary {
  background: #909399;
  color: #fff;
  margin-right: 12px;
}

.btn-secondary:hover:not(:disabled) {
  background: #a6a9ad;
}

.btn-success {
  background: #67c23a;
  color: #fff;
}

.btn-success:hover:not(:disabled) {
  background: #85ce61;
}

.btn-text {
  background: transparent;
  color: #409eff;
}

.btn-text:hover:not(:disabled) {
  background: #ecf5ff;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.table-container {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
}

.table-actions {
  display: flex;
  gap: 10px;
}

.table-wrapper {
  position: relative;
}

.table-wrapper.loading {
  min-height: 300px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th, .data-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

.data-table th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
}

.data-table tr:hover {
  background-color: #f5f7fa;
}

.task-icon {
  font-size: 20px;
  color: #409eff;
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 22px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #67c23a;
}

input:checked + .slider:before {
  transform: translateX(22px);
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  text-align: center;
  padding: 40px;
  color: #909399;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.empty-state i {
  font-size: 48px;
  color: #c0c4cc;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
}

.pagination-info {
  font-size: 14px;
  color: #606266;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-size-select {
  padding: 6px 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
}

.pagination-btn {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination-btn:hover:not(:disabled) {
  background: #f5f7fa;
}

.pagination-btn:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: #fff;
  border-radius: 8px;
  width: 600px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #909399;
}

.modal-close:hover {
  color: #606266;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
}

.edit-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.required {
  color: #f56c6c;
}

.form-textarea {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.form-textarea:focus {
  outline: none;
  border-color: #409eff;
}

.textarea-counter {
  text-align: right;
  font-size: 12px;
  color: #909399;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.radio-custom {
  width: 16px;
  height: 16px;
  border: 1px solid #dcdfe6;
  border-radius: 50%;
  position: relative;
}

.radio-custom::after {
  content: '';
  width: 8px;
  height: 8px;
  background: #409eff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + .radio-custom::after {
  opacity: 1;
}

input[type="radio"]:checked + .radio-custom {
  border-color: #409eff;
}

.limit-inputs {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.file-upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.file-hint {
  font-size: 12px;
  color: #909399;
}

.message {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 4px;
  font-size: 14px;
  z-index: 1001;
  animation: slideIn 0.3s ease;
}

.message.success {
  background: #f0f9ff;
  color: #67c23a;
  border: 1px solid #c2e7b0;
}

.message.error {
  background: #fef0f0;
  color: #f56c6c;
  border: 1px solid #fbc4c4;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }
  
  .table-header {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .pagination-container {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .pagination-controls {
    justify-content: center;
  }
  
  .data-table {
    display: block;
    overflow-x: auto;
  }
}
</style>
